<template>
	<view id="w-collection" :style="{width:product.goods_type == 1?'338rpx':'338rpx'}" @click="toDetail">

		<view class="image_box" :style="{backgroundImage:`url('${$ossUrl + product.listimg}')`}">
			<image :src="$ossUrl + product.listimg" mode="aspectFill" style="width: 100%;height:338rpx;border-radius: 24rpx;"></image>
			<view class="product-image">
				<view :class="`sale-status ${saleStatus == 2 ?'hot-status':''} `">
					<!-- <w-icon :name="saleStatusIcon[saleStatus]" size="16"></w-icon> v-if="saleStatus==1" -->
					<view class="flex flex-ai-center font-size-12 font-color-textPrimary" v-if="saleStatus==1">
						<!-- <w-icon name="clock" size="16"></w-icon> -->
						<text class="mlr-4">倒计时</text>
						<u-count-down :time="countDown" :customStyle="{color:'#000'}" format="HH:mm:ss"></u-count-down>
					</view>
					<view class="flex flex-ai-center font-size-10 font-color-subtitle" v-if="saleStatus==2">
						<w-icon name="hot" size="16"></w-icon>
						<text class="ml-2" style="color: #EA1F15;">抢购中</text>
					</view>
					<view class="flex flex-ai-center font-size-10 font-color-white" v-if="saleStatus==3">
						<!-- <w-icon name="clock1" size="16"></w-icon> -->
						已结束
					</view>
					<view class="flex flex-ai-center flex-js-center font-size-10 font-color-white" v-if="saleStatus==4">
						<!-- <w-icon name="clock1" size="16" class="mr-4"></w-icon> -->
						<view>已售罄</view>
						<view class="ml-5" style="width: 10rpx;height: 10rpx;border-radius: 10rpx;background-color: #CCCCCC;"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_warp mt-12">
			<view class="font-w-500 font-size-16 mb-9">
				{{product.name.length>16? product.name.slice(0,16)+"...":product.name}}
			</view>
			<view class="flex flex-ai-center">
				<view class="tags">
					<w-tag size="border" name="发行" :value="`${ product.total_num}`"></w-tag>
				</view>
				<view class="tags ml-4">
					<w-tag size="border" name="流通" :value="`${ product.flux}`"></w-tag>
				</view>
			</view>
			<view class="price font-color-textPrimary font-w-bold mt-8">
				<text class="font-size-13">￥</text>
				<text class="font-size-18">{{product.price}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import productMixin from "@/mixins/product.js"
	import {
		localBgUrl
	} from "@/config/index.js"
	export default {
		mixins: [productMixin],
		name: "w-index-collection",
		props: {
			product: {
				type: Object,
				default () {
					return {
						listimg: '',
						id: 1,
						batch: {
							total_num: 0,
							sale_total_num: 0,
							has_num: 0,
							start_time: 0,
							end_time: 0,
						},
						price: "0",
						main_img: '',
						goods_type: 1, //1盲盒，2藏品
						name: "",
						end_time: 0,
						release_time: 0,
						total_num: 0,
						sale_total_num: 0,
						publisher: {
							avatar: '',
							name: ""
						}
					}
				}
			}
		},

		data() {
			return {
				localBgUrl,
				saleStatusIcon: {
					1: "clock",
					2: "hot",
					3: "",
					4: "sale-done"
				}
			};
		},
		mounted() {

		},
		methods: {
			toDetail() {
				if (this.product.id) {
					if (this.product.goods_type != 1) {
						this.$u.route('/pages/product/collection', {
							id: this.product.id,
							batch_id: this.product.batch_id
						})
					} else {
						this.$u.route('/pages/product/box', {
							id: this.product.id,
						})
					}
				}
			},
			preview() {
				// uni.$emit('preview',this.product.main_image)
			}
		}
	}
</script>

<style lang="scss" scoped>
	#w-collection {
		position: relative;
		// width: 540rpx;

		border-radius: 24rpx;
		// padding: 24rpx;
		background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%);

		// background-image: url($IMG_URL + '/static/bg/collection-card-bg.png');
		// background-repeat: no-repeat;
		// background-position: 90% bottom;
		// background-size: 268rpx 152rpx;
		.bottom_bg {
			position: absolute;
			right: 40rpx;
			bottom: 0rpx;
		}


		.image_box {
			width: 100%;
			// height: 638rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			// border: 2rpx solid rgba(141, 92, 51, 1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			position: relative;

			// border-image: linear-gradient(154deg, rgba(210, 193, 119, 1), rgba(141, 92, 51, 1)) 2 2;
			.title {
				width: 192rpx;
				height: 44rpx;
				background-size: 192rpx 44rpx;
				background-repeat: no-repeat;
				@extend .pb-8;


				.issuer {
					@extend .flex,
					.flex-ai-center;

					.issuer-name {
						@extend .font-size-10, .font-color-white,
						.ml-4;
					}
				}
			}

			>.product-image {
				position: absolute;
				left: 20rpx;
				z-index: 1;
				top: 20rpx;


				>.sale-status {

					@extend
					.flex,
					.flex-js-center,
					.flex-ai-center;
					border-radius: 40rpx;
					padding: 8rpx 18rpx;
					width: 100%;
					text-align: center;
					box-sizing: border-box;
					/deep/ .u-count-down__text {
						@extend .font-color-white,
						.font-size-10;
						line-height: 0;
					}
				}

				.sale-status::before {
					content: '';
					border-radius: 10rpx;
					z-index: -1;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: rgba(0,0,0,0.5);
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(213,215,223,0.1);
					border-radius: 24rpx 24rpx 24rpx 24rpx;	
				}

				.hot-status::before {
					background: rgba(255,255,255,0.8);
				}
			}
		}

		.bottom_warp {
			border-radius: 0 0 24rpx 24rpx;
		}

		>.price {
			@extend .flex,
			.flex-js-end,
			.font-color-price,
			.flex-ai-end;
			font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
		}
	}
	/deep/ .u-count-down__text {
		color: #000 !important;
	}
</style>